///*------------------------------------*\
//    #SEARCH-FILTER
//\*------------------------------------*/

// Search filter
.search-filter {
    position: relative;
    overflow: hidden;
    height: $size-l;
}

.search-filter--opened-mode {
    width: 100%;
}

.search-filter--closed-mode {
    width: $size-l;
}

@each $key, $color in $colors {
    .search-filter--#{$key} {
        .search-filter__input input,
        .search-filter__clear {
            color: $color;
        }

        .search-filter__input input {
            @include placeholder {
                color: rgba($color, 0.5);
            }
        }
    }
}

    // Search filter: container
    .search-filter__container {
        position: relative;
        height: $size-l;
        padding: 0 $size-l 0 $size-xl;

        .search-filter--closed-mode & {
            width: 240px;
        }
    }

    // Search filter: button
    .search-filter__button {
        @include position(absolute, 0 null null 0);
        @include size($size-l);
    }

    // Search filter: input
    .search-filter__input input {
        @include text-field-reset();
        @include size(100% $size-l);
    }

    // Search filter: clear
    .search-filter__clear {
        @include position(absolute, 0 0 null null);
        @include size($size-l);
        @include font-size(24px);
        text-align: center;
        cursor: pointer;
        @include transform(translateX($size-l));
        @include transition-property(transform);
        @include transition-duration(0.4s);
        @include transition-timing-function($ease-out-quint);

        #{$base-icon-prefix} {
            line-height: $size-l;
        }

        .search-filter--has-clear-button & {
            @include transform(translateX(0));
        }
    }